<template>
  <div class="container">
    <!-- 表格 -->
    <a-table
      row-key="id"
      :loading="loading"
      :pagination="pagination"
      :columns="COLUMNS"
      :data="renderData"
      :size="size"
      column-resizable
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
    >
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useUserStore } from '@/store';
import { COLUMNS } from './hooks/columns.ts';

import { pageSysLog, SysLogData, SysLogParams } from '@/api/monitor/sysLog';

const userStore = useUserStore();

// 密度设置
const size = ref<any>('medium');

// 定义搜索表单对象
const searchForm = ref<SysLogParams>({});
const searchFormRef = ref();

// 定义数据源
const renderData = ref<SysLogData[]>();

// 加载按钮
const loading = ref(false);

// 分页配置
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
  showPageSize: true,
  pageSizeOptions: [10, 20, 50, 100, 200, 500],
});

// 分页切换
const onPageChange = (current: number) => {
  pagination.value.current = current;
  search();
};
// 每页条数切换
const onPageSizeChange = (size: number) => {
  pagination.value.pageSize = size;
  search();
};

// 重置
const reset = () => {
  searchFormRef.value.resetFields();
  Object.assign(searchForm, {});
  search();
};

//查询
const search = async () => {
  searchForm.value.current = pagination.value.current;
  searchForm.value.size = pagination.value.pageSize;
  searchForm.value.sysUserId = userStore.id;
  fetchData(searchForm.value);
};

// 接口查询 - 获取列表
const fetchData = async (searchForm) => {
  loading.value = true;
  try {
    const { data } = await pageSysLog(searchForm);
    renderData.value = data?.records ? data.records : [];
    pagination.value.total = data?.total ? data.total : 0;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    loading.value = false;
  }
};

// 初始化
const initData = () => {
  search();
};

initData();
</script>
